<template>
  <div v-title="'地区站点 - 世外生活运营平台'">
    <mk-breadcrumb  :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="PublicListStyle MkSiteMgt">
      <div element-loading-text="" v-loading="loadingTab">
        <div style='padding:0 20px;background-color:white;height:61px;line-height:60px;'>
          <div style="overflow: hidden;border-bottom:1px solid #f0f3f6;padding:0 0 0 50px;">
            <div style='font-size:14px;color:#81939e;padding-left:10px;float:left;'>名称</div>
            <div style="font-size:14px;color:#81939e;padding-left:10px;float:right;width:450px;">关联的客户</div>
            <div style='font-size:14px;color:#81939e;padding-left:10px;float:right;width:250px;'>是否显示</div>
          </div>
        </div>
        <el-row>
          <el-col :span='24' class='layoutStyle layoutStyle_left' style="padding-right:20px;padding-left:70px;">
            <el-scrollbar :wrapStyle="[{maxHeight:'730px'}]">
              <el-tree :data="dataArr" :props="defaultProps" node-key="id"
                       :default-expanded-keys="defaultKeys" :render-content='renderContent' @node-click="showDetail" :expand-on-click-node="false"></el-tree>
            </el-scrollbar>
          </el-col>
        </el-row>
      </div>


      <!-- 添加-->
      <mk-add-site :showDialog='dialogVisible_add'  v-on:closeDialog='closeDialog_add'  :currentParentId = 'currentParentId' :currentSiteLevel = 'currentSiteLevel'></mk-add-site>

      <!--详情-->
      <mk-site-detail :showDialog='dialogVisible_detail'  v-on:closeDialog='closeDialog_detail' :currentObj="currentObj"></mk-site-detail>
    </div>
    </el-scrollbar>
  </div>

</template>

<script>
  import MkBreadcrumb from '../../components/MkBreadcrumb.vue'
  import productService from '../../services/product'
  import siteService from '../../services/site'
  import { mapState } from 'vuex'
//  import MkPermission from "../../components/MkPermission";
  import MkAddSite from './MkAddSite.vue'
  import MkSiteDetail from './MkSiteDetail.vue'
  export default {
    name: 'MkSiteMgt',
    components: {
      MkBreadcrumb,MkSiteDetail,MkAddSite
    },

    methods: {
      showDetail(data) {
        this.currentObj = data;
        this.dialogVisible_detail = true;
      },
      closeDialog_detail(type) {
        if(type) {
          this.loadData();
        }
        this.dialogVisible_detail = false;
      },
      closeDialog_add(type) {
        if(type) {
            this.loadData();
        }
        this.dialogVisible_add = false;
      },
      append(data,event) {
        event.cancelBubble = true;
        event.stopPropagation();
        this.currentParentId  = data.id;
        this.currentSiteLevel = data.siteLevel;
        this.dialogVisible_add = true;
      },
      renderContent(h, { node, data, store }) {
         var isShow = data.status=='ENABLE'? 'hasCheck' : 'hasClose';
         var hasNoAdd = data.siteLevel == 'SITE'? 'hasNoAdd' : '';
         var hasBindingCompany = data.bindingCompany?'hasBindingCompany':'noBindingCompany';
          return (<div style='width:100%;'>
            <span style='font-size:14px;float:left;'>
              <span>{node.label}</span>
            </span>
            <span style="float: right; display:inline-block;width:120px;color:#3bc0c3;font-size:14px;">
              <span on-click={ () => this.append(data,event) }  style='padding:8.5px;' class='hoverColor' classname={hasNoAdd}>{data.siteLevel=='COUNTRY'?'添加地区':'添加站点'}</span>
            </span>

            <el-tooltip class="item" effect="dark" content={data.bindingCompany} placement="top"  classname={hasBindingCompany}>
               <span  style="float: right; display:inline-block;font-size:14px;width:295px;margin-right:30px;">
          {data.bindingCompany && data.bindingCompany.length>20?data.bindingCompany.slice(0,20)+'...':data.bindingCompany}&nbsp;
              </span>
          </el-tooltip>

            <span style="float: right; display:inline-block;color:#3bc0c3;font-size:14px;width:260px;" classname={isShow}>
              <i class='el-icon-check' style='padding:5 10px;color:#3bc0c3'  ></i>
              <i class='el-icon-close' style='padding:5 10px;color:#b6c2c9;'></i>
            </span>
        </div>);
      },
      loadData() {
        this.loadingTab = true;
        this.$store.dispatch('loadSiteTree',{fields:'id,name,status,bindingCompany,children,siteLevel,parentIdPath,parentId'}).then(()=>{
          this.loadingTab = false;
        })
      }
    },
    computed:mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
      dataArr: state => [state.site.siteTree]
    }),
    watch: {
      dataArr:function(val) {
        let arr=[];
        for(var i=0;i<val.length;i++) {
          arr.push(val[i].id)
        }
        this.defaultKeys = arr;
      }
    },
    mounted: function() {

    },
    activated(){
      this.loadData();
    },
    data () {
      return {
        currentSiteLevel: '',
        currentParentId: null,
        currentObj: {},
        defaultKeys:[],
        dialogVisible_detail:false,
        dialogVisible_add: false,
//        dataArr:[],
        loadingTab: false,
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        breadcrumbData: {
          list:[
           {name:'站点管理',path: null, clickAble: false},
           {name: '地区站点',path: null, clickAble: false}
          ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'site-icon',
        }


      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  .MkSiteMgt{
    [classname = hasNoAdd] {
      visibility:hidden;
    }
    [classname = hasBindingCompany] {
      visibility: visible;
    }
    [classname = noBindingCompany] {
      visibility:hidden;
    }
    [classname=hasCheck]{
      .el-icon-check{
        display: inline;
      }
      .el-icon-close{
        display: none;
      }
    }
    [classname=hasClose]{
      .el-icon-check{
        display: none;
      }
      .el-icon-close{
        display: inline;
      }
    }
    .hoverColor{
      &:hover{
        color:#18878a;
      }
    }
  }




</style>
